<template>
	<div :id="model.id" class="banner" :class="`terminal${terminal}`">
		<el-carousel 
			:height="`${model.data.height}px`" 
			:initial-index="model.data.initialIndex"
			:trigger="model.data.trigger"
			:autoplay="model.data.autoplay"
			:interval="model.data.interval"
			:indicator-position="model.data.indicatorPosition"
			:arrow="model.data.arrow"
			:type="model.data.type"
			:loop="model.data.loop"
			:direction="model.data.direction"
			:pauseOnHover="model.data.pauseOnHover">
			<el-carousel-item v-for="(item, index) in carousels" :key="index">
				<el-image :src="item.url" fit="contain" />
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, getCurrentInstance } from 'vue';
	export default {
		name: 'banner-basics',
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const { proxy } = getCurrentInstance();
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
				carousels: props.model.data.carousels,
			});
			
			onMounted(() => {
				state.model.data.height = proxy.$el.clientWidth / props.model.data.scale;
			})
			
			return {
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
	.banner {
		.banner-item {
			width: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: auto 100%;

			img {
				width: 100%;
			}
		}

		&.terminal4 {
			:deep .el-carousel {
				height: 100%;

				.el-carousel__container {
					height: 100%;
				}
			}

			.banner-item {
				img {
					display: none;
				}
			}
		}

		.swiper-pagination {
			display: flex;
			justify-content: center;
			bottom: 20px;
			width: 100%;

			:deep .swiper-pagination-bullet {
				width: 30px;
				height: 4px;
				background: #fff;
				opacity: 0.5;
				border-radius: 2px;
				margin: 0 7.5px;
			}

			:deep .swiper-pagination-bullet-active {
				opacity: 1;
				width: 58px;
			}
		}
	}
</style>
